<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>026-动画</title>
		<style>
			.outer {
				width: 1000px;
				height: 100px;
				border: 1px solid black;
			}

			.inner {
				width: 100px;
				height: 100px;
				background-color: skyblue;

				/* 应用动画 */
				animation-name: wangyoudong2;

				/* 设置动画持续时间 */
				animation-duration: 3s;

				/* 设置动画延迟时间 */
				animation-delay: 1s;

				/* 设置动画的循环次数，可以通过数字定义播放次数，infinite为无限次 */
				/* animation-iteration-count: infinite; */

				/* 设置动画的方向： normal 为正向播放 reverse 为反向播放 alternate 为往复播放 alternate-reverse 为反向交替 */
				animation-direction: normal;

				/* 设置动画的速度 */
				animation-timing-function: linear;

				/* 动画以外的状态（不发生动画的时候停在那里） */
				/* forwards 表示最后一帧在哪里，元素就停在哪里；
				backwards 表示第一帧在哪里，元素就停在哪里（默认）；
				both 表示动画结束后保持最后一帧的状态 */
				animation-fill-mode: forwards;

				/* 动画播放状态，停止和开启。 paused 表示暂停， running 表示开启 */
				animation-play-state: running;

				/* 【复合属性写法】 */
				/* animation: 动画名 动画时长 动画延迟时间 动画类型(function) 动画循环次数 动画方向(direction) 动画保持状态(mode) 动画播放状态(state); */
			}

			.outer:hover .inner {
				animation-play-state: paused;
			}

			/* 定义动画（定义一组关键帧）———— 第一种方式 */
			@keyframes wangyoudong {
				/* 第一帧  */
				from {
				}
				/* 最后一帧 */
				to {
					background-color: red;
					transform: translate(900px);
				}
			}

			/* 定义动画（定义一组关键帧）———— 第二种方式 */
			@keyframes wangyoudong2 {
				0% {
				}

				29% {
					background-color: yellow;
				}

				48% {
					background-color: greenyellow;
				}

				88% {
					background-color: blue;
				}

				100% {
					transform: translate(900px) rotate(360deg);
					background-color: red;
					border-radius: 50%;
				}
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
	</body>
</html>
